<template>
    <div class="record">
        <yh-dialog
            drag
            :title="type == 'fund' ? '产品历史记录信息' : '合同历史记录信息'"
            :visible.sync="visible"
            width="1000px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-collapse v-model="activeNames">
                <el-collapse-item title="变更记录" name="1">
                    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" border size="mini" v-loading="loading">
                        <el-table-column label="变动事件" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span>{{ handleParam(scope.row.modifyType) || '--' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="operateDate" label="变更时间" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span> {{ dateFormat(scope.row.operateDate) }} {{ timeFormat(scope.row.operateTime) }} </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="operateNo" label="变更人" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span> {{ scope.row.operateNo || '--' }} </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="操作" width="90">
                            <template slot-scope="scope">
                                <RiskIconButton
                                    type="primary"
                                    icon="el-icon-view"
                                    topTitle="查看比对记录"
                                    size="mini"
                                    :disabled="scope.row.modifyType === '1'"
                                    @on-click="lookInfo(scope.row, scope.$index)"
                                >
                                </RiskIconButton>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
                <el-collapse-item title="详情" name="2">
                    <div class="edit-div">
                        <EntryItemCompare v-if="editDatas.length" :data="editDatas" />
                    </div>
                </el-collapse-item>
            </el-collapse>

            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="visible = false"> 取 消 </el-button>
            </div>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import { timeFormat, dateFormat } from '@/utils/tools';
import { mixins } from 'vue-class-component';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import EntryItemCompare from '@/pages/setting/components/item-setting/item-compare.vue';
import DictionConstUtil from '../dict';

@Component({
    name: 'UpdateRecord',
    components: {
        RiskIconButton,
        EntryItemCompare,
    },
})
export default class UpdateRecord extends mixins(RiskEmitter) {
    @Prop() code: any;
    @Prop() dialog: boolean;
    @Prop() type: string;
    visible: boolean = true;
    activeNames: string = '1';
    tableData: any[] = [];
    loading: boolean = false;
    private timeFormat = timeFormat;
    private dateFormat = dateFormat;
    editDatas: any = {};
    fundTypePojo = DictionConstUtil.fundTypePojo;

    contractTypePojo = DictionConstUtil.contractTypeOptions;

    mounted() {
        this.visible = this.dialog;
        this.getRecordData();
    }

    @Watch('visible')
    handleVisible() {
        if (!this.visible) {
            this.$emit('close-custom');
        }
    }

    getRecordData() {
        // debugger;
        let url = '';
        let requestData = {};
        if (this.type == 'fund') {
            url = '/ledger/productCode/log';
            requestData = {
                fdProductCode: this.code,
            };
        } else {
            url = '/ledger/contract/log';
            requestData = {
                contractSerialNo: this.code,
            };
        }
        this.loading = true;
        this.$axios
            .post(url, requestData)
            .then((res: any) => {
                this.tableData = res;
            })
            .finally(() => {
                this.loading = false;
            });
    }

    // 查看比对记录
    lookInfo(val: any, index: any) {
        let lastRecord = this.tableData[index];
        let operateDetail = JSON.parse(lastRecord.operateDetail);
        let arr = [];
        if (operateDetail.length) {
            const values = Object.values(operateDetail[0]);
            values.filter(ele => {
                arr = arr.concat(ele);
            });
        }
        arr.map(ele => {
            if (ele.moduleDetail == '生效时间') {
                ele.afterChange = dateFormat(ele.afterChange);
                ele.beforeChange = dateFormat(ele.beforeChange);
            }
        });
        this.editDatas = arr;
        this.activeNames = '2';
        console.log(this.editDatas, 'lastRecord');
    }

    // 变更时间字段处理
    handleParam(value: string) {
        if (this.type == 'fund') {
            return this.fundTypePojo[value];
        } else {
            return this.contractTypePojo[value];
        }
    }
}
</script>
<style lang="scss" scoped>
/deep/.el-dialog .el-dialog__body {
    height: 70vh;
}
.dialog-footer {
    margin-right: 20px;
    text-align: right;
}
</style>
